<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont back-icon">&#xe624;</span>
      <span class="back-text">返回</span>
    </div>
    <div class="header-title">
      订货会系统
    </div>
    <div class="header-right">
      <div class="iconfont sweep-yard">&#xe630;</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header'
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header
  display: flex
  line-height: $headerHeight
  background: $headerBgColor
  color: #fff
  .header-left
    width: 1.4rem
    float: left
    margin-left: .1rem
    .back-icon
      text-align: center
      font-size: $headerFontSize
      font-weight: bold
    .back-text
      font-size: $headerFontSize
   .header-title
     flex: 1
     overflow: hidden
     height: .64rem
     line-height: .64rem
     margin-top: .12rem
     color: #CCC
     text-align: center
     font-weight: bold
     font-size: $headerFontSize
   .header-right
     width: .8rem
     float: right
     text-align: center
     color: #fff
     .sweep-yard
       font-size: $headerFontSize
       font-weight: bold
</style>
